import React,{Component} from 'react';
import {Form, Select,Input, Button} from 'antd';
import {redirect,backward} from 'lib/utils';
import API, {} from 'lib/api';
import './style.less';

const FormItem = Form.Item;
const Option = Select.Option;


const phone_attr = [
    {
        name:"size",
        label:"尺寸",
        value:"5英寸",
        required:false,
    },
    {
        name:"screen",
        label:"屏幕",
        required:false,
        value:"5.0屏幕",
        option:[
            {value:"5.0屏幕",text:"5.0屏幕"},
            {value:"6.0屏幕",text:"6.0屏幕"}
        ]
    }
];
const commodity_attr = [
    {
        name:"num",
        label:"产品代号",
        required:false,
        option:[
            {value:"EDG",text:"EDG站队"},
            {value:"RNG",text:"RNG全华班"},
        ]
    },
    {
        name:"standard",
        label:"规格",
        required:false,
        option:[
            {value:"2",text:"2元/瓶"},
            {value:"3",text:"4元/瓶"},
        ]
    }
];

/* 初始化数据 */
const initData ={
    goods_genre:"phone",
    size:"5英寸",
    screen:"5.0屏幕"
}

class Attribute extends Component{
    constructor(props){
        super(props);

        this.state={
            attributeList:[]
        }
    };



    componentDidMount(){
        // API.fetch("",{id:id},resp=>{  获取商品分类
            const goods_sort = [
                {name:"手机",value:"phone"},
                {name:"日用品",value:"commodity"},
            ];

            this.setState({
                attributeList:phone_attr,  // 测试 ==> 默认使用手机属性
                goods_sort:goods_sort
            },_=>{

                if(this.props.id){ // 编辑状态
                    // API.fetch("",{id:id},resp=>{
                    this.props.form.setFieldsValue(initData);         // 设置控价默认值
                    // });

                };
            })

        // });



    };


    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                console.log('Received values of form: ', values);
            }else {
                //  必传图片的错误信息提示,是否显示
                if(err.img){
                    this.setState({hasImg:false})
                }else{
                    this.setState({hasImg:true})
                }
            }
        });
    };


    // 下拉框回调  传入的参数(param)在前,value在后
    handleSelectChange (param,value){
        const that = this;
        if(value){
            /* this.props.form.setFieldsValue({
                表单控件名:控件value 确定是那一个选项
             });

             下方是针对多个相同select控件,而修改的版本,param ==> 表单控件注册的名称
             */
            let obj = {}
            obj[`${param}`] = value;
            this.props.form.setFieldsValue(obj);

            setTimeout(_=>{
                // this.setState({ AttributeList:请来的属性列表数据 });  模拟切换
                let list = [];

                if(value=="phone"){
                    list = phone_attr;
                }else if(value=="commodity"){
                    list = commodity_attr;
                };

                if(list.length!=0){ this.setState({AttributeList:list})}

            },300)
        }

    };

    render(){
        const {attributeList,goods_sort} = this.state;
        const { getFieldDecorator } = this.props.form;
        return(
            <Form onSubmit={this.handleSubmit} className="standard-info">

                <FormItem label="所属商品类型" labelCol={{ span: 4 }} wrapperCol={{ span: 8 }} >

                    {getFieldDecorator('goods_genre', {
                        rules: [{ required: true, message: '请选择商品类型' }],
                    })(
                        <Select placeholder="请选择商品类型"
                            onChange={this.handleSelectChange.bind(this,"goods_genre")}
                        >
                            {   goods_sort?
                                    goods_sort.map((item,key)=>(
                                        <Option key="key" value={item.value} >{item.name}</Option>
                                    ))
                                :null
                            }
                        </Select>
                    )}
                </FormItem>

                {
                    attributeList.map((v,k)=>(
                        <FormItem key={k}
                                  label={v.label}
                                  labelCol={{ span: 4 }}
                                  wrapperCol={{ span: 8 }}
                        >

                            {getFieldDecorator(v.name, {
                                rules: [{ required: v.required, message: ' ' }],
                            })(

                                v.option?
                                    <Select onChange={this.handleSelectChange.bind(this,v.name)} >
                                        {
                                            v.option.map((items,index)=>(
                                                <Option key={index} value={items.value}>{items.text}</Option>
                                            ))
                                        }

                                    </Select>
                                :
                                    <Input placeholder=" "/>

                            )}


                        </FormItem>
                    ))
                }

                <FormItem wrapperCol={{ span: 8, offset: 4 }} >
                    <Button type="primary" htmlType="submit"> 保存 </Button>
                </FormItem>
            </Form>
        )
    }
};

export default Form.create()(Attribute);